/* 保留这些基础样式 */
body, html, #root, .app-container {
  height: 100vh;
  width: 100vw;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', 'PingFang SC', 'Arial', sans-serif;
  background: #181818;
  box-sizing: border-box;
  overflow-x: hidden;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 100vw;
  min-width: 0;
  min-height: 0;
  background: none;
  box-sizing: border-box;
}

header {
  flex: 0 0 auto;
  width: 100%;
  background: #222c38;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  padding-bottom: 2px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
}

.main-content {
  flex: 1 1 0;
  width: 100%;
  /* height: calc(100vh - 56px); */
  min-width: 0;
  /* min-height: 0; */
  display: flex;
  box-sizing: border-box;
  padding: 0;
  gap: 0;
  background: none;
  overflow: hidden;
}

/* Subtitle panel scroll container */
.subtitle-editor-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 0 12px 12px 12px; /* 与内部项目留空 */
}
.subtitle-editor-scroll::-webkit-scrollbar { width: 8px; }
.subtitle-editor-scroll::-webkit-scrollbar-track { background: #1c1c1c; }
.subtitle-editor-scroll::-webkit-scrollbar-thumb { background: #444; border-radius: 4px; }
.subtitle-editor-scroll::-webkit-scrollbar-thumb:hover { background: #555; }
.subtitle-editor-scroll { scrollbar-width: thin; scrollbar-color: #444 #1c1c1c; }

/* 统一 react-grid-layout 的右下角缩放把手位置，防止偏移 */
.react-grid-item > .react-resizable-handle.react-resizable-handle-se {
  bottom: 4px !important;
  right: 4px !important;
  width: 16px;
  height: 16px;
  background: linear-gradient(135deg, transparent 0, transparent 40%, #666 40%, #666 60%, transparent 60%, transparent 100%);
  opacity: 0.6;
}

.react-grid-item > .react-resizable-handle.react-resizable-handle-se:hover {
  opacity: 0.9;
}

